<template>
	<div style="padding: 10px 36px;">
		<el-transfer class="trans" v-model="value"
				:data="data" :titles="['待添加人员', '已添加人员']"/>
	</div>
</template>

<script>
export default {
  props:{
    modelValue: {
      type: Array,
      default: () => []
    }
  },
  emits: ['update:modelValue'],
	data(){
		return {
			value: [] , // 已选中的人员ID
			data: []    // 所有人员列表,
		};
	},
  watch:{
    modelValue: {
      immediate: true,
      handler(val) {
        if (JSON.stringify(val) !== JSON.stringify(this.value)) {
          this.value = [...val];
        }
      }
    },
    value(val){
      if (JSON.stringify(val) !== JSON.stringify(this.modelValue)) {
        this.$emit('update:modelValue', val);
        console.log("已选人员IDs:", val)
      }
    },
  },
  methods: {
    async fetchAllUsers() {
      try {
        const res = await this.$api.getAllUsers();
        this.data = res.map(user => ({
          key: user.id,
          label: user.name,
        }));
      } catch (e) {
        this.$message.error("获取用户失败");
      }
    }
  },
  mounted() {
    this.fetchAllUsers();
  },
}
</script>

<style>
.trans .el-transfer__buttons {
	text-align: center;
}

.trans .el-transfer__button {
	display: block !important;
	margin: 8px 0 !important;
}

.trans .el-transfer-panel__body, .trans .el-transfer-panel__list {
	height: 600px !important;
}

</style>